<template>
  <XtxBread>
        <XtxBreadItem to="/">首页</XtxBreadItem>
        <XtxBreadItem :key="category.top.id" v-if="category.top"  :to="`/category/${category.top.id}`">{{category.top.name}}</XtxBreadItem>
         <Transition name="fade-right" mode="out-in">
            <XtxBreadItem v-if="category.sub" :key="category.sub.id">{{category.sub.name}}</XtxBreadItem>
         </Transition>
    </XtxBread>
</template>

<script>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router'
import { computed,watch,ref } from 'vue'
export default {
 name:"SubBrand",
 setup(){
      
     const route = useRoute()
     const store = useStore()
    // console.log('store',store.state.category.list);
    // 我们所需要的数据 category={top:{id:xx,name:xx},sub:{id:xx,name:xx}}
    //1.获取二级类目的ID  在地址在路由中
    //2.获取二级类目数据 在vuex
    //3.通过计算属性获得一级类目ID和name，二级类目ID和name
    const category =computed(()=>{
        let obj ={}
        store.state.category.list.forEach(t=>{
            t.children && t.children.forEach((s)=>{    
                if(s.id===route.params.id){
                    //设置二级类目ID和name
                    obj.sub={id:s.id,name:s.name}
                    //设置二级类目ID和name
                    obj.top={id:t.id,name:t.name}
                    // console.log('obj',obj);
                }
            })
        })
        return obj
    })

     return {category}
 }
}
</script>

<style>

</style>